import React, { Component } from "react";
import { WingBlank } from "antd-mobile";
import { Map } from "react-bmapgl";

import Marker from "react-bmapgl/Overlay/Marker";
import ZoomControl from "react-bmapgl/Control/ZoomControl";
import "./index.scss";
class PrivateMap extends Component {
  render() {
    const { houseCoord, partName } = this.props;

    return (
      <div className="PrivateMapWrapper">
        <WingBlank>
          <div className="title">
            小区:<span> {partName}</span>
          </div>
        </WingBlank>
        <div className="map">
          <Map
            style={{ height: 140, width: "100%" }}
            center={
              new window.BMapGL.Point(
                houseCoord ? Number(houseCoord.longitude) : 116.4,
                houseCoord ? Number(houseCoord.latitude) : 39.91
              )
            }
            zoom={18}
            maxZoom={18}
          >
            <Marker
              icon="loc_red"
              position={
                new window.BMapGL.Point(
                  houseCoord ? Number(houseCoord.longitude) : 116.4,
                  houseCoord ? Number(houseCoord.latitude) : 39.91
                )
              }
              enableDragging={false}
            />
            <ZoomControl />
          </Map>
        </div>
      </div>
    );
  }
}

export default PrivateMap;
